<template>

    <div class="body">
        <el-row>
            <el-col :span="18" :offset="4" :gutter="20" >
                <el-tabs v-model="fist" @tab-click="handlerChang" :tab-position="tabPosition" style="height: 500px;" >
                    <el-tab-pane label="个人信息" name="userDiv" >
                        <div>

                            <div style="display: flex; margin-top: 20px; height: 700px;">

                                <transition name="el-zoom-in-center">

                                    <div v-if="student" class="transition-box-user">
                                        <el-form ref="form" :model="form" label-width="80px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="姓名" style="width: 200px;margin-top: 10px">
                                                        <el-input
                                                                v-model="student.name"
                                                                :disabled="true">
                                                        </el-input>
                                                    </el-form-item>
                                                    <el-form-item label="性别" style="width: 250px">
                                                        <el-input v-model="student.sex" :disabled="true"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="班级" style="width: 300px">
                                                        <el-input v-model="student.classes.classesName" :disabled="true"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="手机号" style="width: 350px">
                                                        <el-input v-model="student.phone" :disabled="true"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="身份证号" style="width: 400px">
                                                        <el-input v-model="student.identity" :disabled="true"></el-input>
                                                    </el-form-item>
                                                </el-col>

                                                <el-col :span="12">

                                                    <el-row>
                                                        <el-col :span="24">
                                                            <el-image
                                                                    style="width: 100px; height: 100px;border-radius: 50%"
                                                                    :src="student.pic"
                                                            >
                                                            </el-image>
                                                        </el-col>
                                                    </el-row>
                                                    <span>个人头像</span>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                        <el-drawer
                                                title="个人须知"
                                                :visible.sync="drawer"
                                                :with-header="false">
                                            <div style="margin-top: 80px;" >
                                                <el-divider content-position="center" >个 人 须 知</el-divider>
                                                <p>各位同学请仔细浏览自己的个人信息</p>
                                                <p>如果个人信息和自己不符请迅速联系后台人员进行修改</p>
                                            </div>

                                        </el-drawer>

                                        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
                                            个人须知
                                        </el-button>

                                    </div>
                                    <div v-if="teacher" class="transition-box-user">
                                        <el-form ref="form" :model="form" label-width="80px">
                                            <el-row>
                                                <el-col :span="12">
                                                    <el-form-item label="姓名" style="width: 200px;margin-top: 10px">
                                                        <el-input
                                                                v-model="teacher.name"
                                                                :disabled="true">
                                                        </el-input>
                                                    </el-form-item>
                                                    <el-form-item label="性别" style="width: 250px">
                                                        <el-input v-model="teacher.sex" :disabled="true"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="手机号" style="width: 350px">
                                                        <el-input v-model="teacher.phone" :disabled="true"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="身份证号" style="width: 400px">
                                                        <el-input v-model="teacher.identity" :disabled="true"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-row>
                                                        <el-col :span="24">
                                                            <el-image
                                                                    style="width: 100px; height: 100px;border-radius: 50%"
                                                                    :src="teacher.pic"
                                                            >
                                                            </el-image>
                                                        </el-col>
                                                    </el-row>
                                                    <span>个人头像</span>

                                                </el-col>
                                            </el-row>
                                        </el-form>
                                        <el-drawer
                                                title="个人须知"
                                                :visible.sync="drawer"
                                                :with-header="false">
                                            <div style="margin-top: 80px;">
                                                <el-divider content-position="center" >个 人 须 知</el-divider>
                                                <p>各位老师请仔细浏览自己的个人信息</p>
                                                <p>如果个人信息和自己不符请迅速联系后台人员进行修改</p>
                                            </div>
                                        </el-drawer>

                                        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
                                            个人须知
                                        </el-button>
                                    </div>
                                </transition>

                            </div>
                        </div>
                    </el-tab-pane>


                    <el-tab-pane name="div"  label="修改密码">
                        <div>
                            <div style="margin-top: 20px; height: 550px;margin-left: 100px;">
                                <el-collapse-transition style="height: 550px;">
                                    <div v-show="show3">
                                        <div class="transition-box">
                                            <div class="transition-box-div">

                                            </div>
                                            <div class="writer">
                                                <el-form v-if="student" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                                    <el-form-item  prop="oldPass" class="password" style="opacity: 1!important;">
                                                        <el-input placeholder="请输入旧密码" type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item  prop="pass" class="password">
                                                        <el-input placeholder="请输入新密码" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item  prop="checkPass" class="password">
                                                        <el-input  placeholder="请确认新密码" type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button :plain="true" type="primary" @click="submitForm('ruleForm')" style="margin-right: 50px;margin-left:100px">提交</el-button>
                                                        <el-button @click="resetForm('ruleForm')" style="margin-right: 150px">重置</el-button>
                                                    </el-form-item>
                                                </el-form>

                                                <el-form v-if="teacher" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                                    <el-form-item  prop="oldPass" class="password" style="opacity: 1!important;">
                                                        <el-input placeholder="请输入旧密码" type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item  prop="pass" class="password">
                                                        <el-input placeholder="请输入新密码" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item  prop="checkPass" class="password">
                                                        <el-input  placeholder="请确认新密码" type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item>
                                                        <el-button :plain="true" type="primary" @click="submitForm('ruleForm')" style="margin-right: 50px;margin-left:100px">提交</el-button>
                                                        <el-button @click="resetForm('ruleForm')" style="margin-right: 150px">重置</el-button>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-transition>
                            </div>
                        </div>

                    </el-tab-pane>

                    <el-tab-pane label="修改头像" name="faceDiv"><div>

                        <div style="display: flex; margin-top: 20px; height: 500px;">
                            <transition name="el-fade-in-linear">
                                <div v-show="show4" class="transition-box-face">
                                    <el-upload
                                            class="avatar-uploader"
                                            action="http://localhost:8080/upImage/upload"
                                            name="photo"
                                            :show-file-list="false"
                                            :on-success="handleAvatarSuccess"
                                            :before-upload="beforeAvatarUpload">
                                        <img v-if="form.pic" :src="form.pic" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 50%;background-color:white;"></i>
                                    </el-upload>
                                    <el-button @click="saveUpdatePic()" type="primary" style="margin-top: 50px">确定<i class="el-icon-upload el-icon--right"></i></el-button>

                                </div>
                            </transition>
                        </div>
                    </div></el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    export default {
        data(){
            var validatePass0 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入旧密码'));
                } else {
                    // if (this.ruleForm.oldPass !== '') {
                    //     this.$refs.ruleForm.validateField('oldPass');
                    // }
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                fist:'userDiv',
                teacher:undefined,
                student:undefined,
                drawer: false,
                show3: false,
                show2:false,
                show4:false,
                imageUrl: '',
                tabPosition:'left',
                form:{
                    id:'',
                    pic:''
                },
                headerTitle:'',
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    oldPass:'',
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    oldPass: [
                        { validator: validatePass0, trigger: 'blur' }
                    ],

                },
                url: '',
                srcList: [

                ]

            };
        },
        created() {
            this.handlerUserCenter();
        },
        methods: {
            submitForm() {
                this.$message({
                    message: '修改密码成功',
                    type: 'success'
                });
            },
            submitForm(formName) {
                let id;
                if(window.localStorage.getItem("student")!=null){
                    id = JSON.parse(window.localStorage.getItem("student")).id;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log(this.ruleForm)
                            let student = {
                                id:this.student.id,
                                password:this.ruleForm.checkPass
                            }
                            console.log(student)
                            this.$axios.post("/student/studentCenterUpdatePass",student,{params:{oldPassword:this.ruleForm.oldPass}}).then(res =>{
                                console.log(res)
                                if(res.data.code==10002){
                                    this.$message.error('旧密码错误');
                                }else{
                                    // 清空token
                                    window.localStorage.clear();
                                    //   跳转到登录页
                                    this.$router.push("/weblogin");
                                    // console.log(res)
                                }


                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                }
                else {
                    let id;
                    id=JSON.parse(window.localStorage.getItem("teacher")).id;
                    this.$refs[formName].validate((valid)=>{
                        if(valid){
                            let  teacher ={
                                id:this.teacher.id,
                                password:this.ruleForm.checkPass
                            }
                            this.$axios.post("/manage/teacher/teacherCenterUpdatePass",teacher,{params: {oldPassword: this.ruleForm.oldPass}}).then(res=>{
                                if(res.data.code==10002){
                                    this.$message.error('旧密码错误');
                                }else if(res.data.code==200){
                                    // 清空token
                                    window.localStorage.clear();
                                    //   跳转到登录页
                                    this.$router.push("/weblogin");
                                    // console.log(res)
                                }
                            })
                        }else {
                            return false;
                        }
                    })
                }

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
           /* handleAvatarSuccess(res, file) {
                console.log(res)
                this.form.pic = URL.createObjectURL(file.raw);
            },*/
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handlerChang(tab, event){
                /*console.log(tab)
                console.log(event)*/
                if(tab.name=="div"){
                    this.show3 = true;
                }
                else {
                    this.show3 = false;
                }
                if(tab.name=="userDiv"){
                    this.show2=true;
                }
                else {
                    this.show2=false;
                }
                if(tab.name="faceDiv"){
                    this.show4=true;
                }
                else {
                    this.show4=false;
                }
            },
            //确定上传图片
            saveUpdatePic(){
                // this.student.pic = this.form.pic;
                if(this.student!=undefined){
                    this.$axios.post("/student/updatePic",this.student).then(response=>{
                        let studen = JSON.parse(localStorage.getItem("student"))
                        console.log(studen)
                        studen.pic =  this.student.pic
                        localStorage.setItem("student", JSON.stringify(studen));
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    });
                }
                else if(this.teacher!=undefined){
                    this.$axios.post("/manage/teacher/updatePic",this.teacher).then(response=>{
                        if(response.data.code!=10002){
                            let teacher = JSON.parse(localStorage.getItem("teacher"))
                            // console.log(studen)
                            teacher.pic =  this.teacher.pic
                            localStorage.setItem("teacher", JSON.stringify(teacher));
                            this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                        }
                    });
                }

            },
            //添加图片上传成功
            handleAvatarSuccess(res, file) {
                console.log(res)
                this.form.pic =  URL.createObjectURL(file.raw);

                if(this.student!=undefined){
                    this.student.pic = res.msg;
                }else {
                    this.teacher.pic = res.msg;
                }

                // this.student.pic = res.msg;
                // console.log(this.student)
            },
            // 获取个人信息
            handlerUserCenter() {
                let id;
                if(window.localStorage.getItem("student")!=null){
                    id =  JSON.parse(window.localStorage.getItem("student")).id;
                    this.$axios.post("/student/studentCenter/"+id).then(response => {
                        this.student = response.data.student;
                        this.student.id=id;
                        console.log(this.student)
                        console.log(id)
                    })
                }
                else{
                    id =  JSON.parse(window.localStorage.getItem("teacher")).id;
                    console.log(id)
                    this.$axios.post("/manage/teacher/teacherCenter/"+id).then(response => {
                        this.teacher = response.data.teacher;
                        this.teacher.id=id;
                        // console.log(this.teacher)
                        // console.log(id)
                        // this.headerTitle="获取个人信息";
                        // this.dialogFormVisible = true;
                    })
                }
            },

        }
    }
</script>

<style scoped>

    i.el-icon-plus.avatar-uploader-icon{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
        border-radius: 50%;
    }

    .transition-box {
        margin-bottom: 10px;
        width: 680px;
        height: 400px;
        position: relative;
    }
    .transition-box-div{
        width: 100%;
        height: 100%;
        border-radius: 20px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        /*padding: 80px 40px;*/
        box-sizing: border-box;
        /*margin-right: 30px;*/
        opacity: 0.5;
        position: absolute;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 1)
    }
    .writer{
        position: absolute;
        /*left:0;*/
        top: 80px;
        margin-left:20px;
    }

    .transition-box-user {
        margin-bottom: 10px;
        width: 600px;
        height: 430px;
        border-radius: 20px;
        /*background-color: white;*/
        text-align: center;
        /*color: #fff;*/
        padding: 40px 20px;
        box-sizing: border-box;
        margin-left: 100px;
        box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 1)
        /*opacity: 0.5;*/
    }
    .body{
        width: 100%;
        height: 100%;
        background: url("~@/assets/login.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin-left: -20px;
        margin-top: -13px;
    }

    .transition-box-face {
        margin-bottom: 10px;
        width: 600px;
        height: 430px;
        border-radius: 20px;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-left: 100px;
        box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 1)
    }
    .el-icon-plus avatar-uploader-icon{
        background-color: #bfcbd9;
        border-radius: 100%;
    }
    .demo-image__preview{
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-left: 350px;
    }



</style>